<!-- 拼团列表组件 -->
<template>
  <div id="groupListCell">
    <div class="goods_img">
      <img :src="thumb" />
    </div>
    <ul class="goods_info">
      <li class="name" style="-webkit-box-orient: vertical;">
        {{ title }}
      </li>
      <li class="price">
        <span>{{ $i18n.t("money") }}</span
        >{{ group_price }}&nbsp;<span style="text-decoration: line-through;">{{ $i18n.t("money") }}{{ price }}</span>
      </li>
      <template v-if="teamList.length > 0">
        <van-swipe class="my-swipe" :autoplay="3000" :touchable="false" :show-indicators="false" :vertical="true" style="height: 2rem; margin: 4px 0;">
          <template v-for="(datas, ind) in teamList">
            <van-swipe-item :key="ind">
              <div class="allteam" @click.stop="getAllTeam()">
                <div class="allLeft">
                  <div class="teamNo" v-if="datas.has_one_leader">{{ datas.has_one_leader.username }}</div>
                  <span class="teamTwo" v-if="datas.has_one_level">已开团，差{{ datas.has_one_level.member_num - datas.has_many_success_member_count }}人</span>
                </div>
                <div class="allRight">
                  <van-icon name="arrow"></van-icon>
                </div>
              </div>
            </van-swipe-item>
          </template>
        </van-swipe>
      </template>

      <li class="number">
        <div class="left" v-if="num">
          <i class="iconfont icon-group_list"></i>
          <span>{{ num }}人</span>
        </div>

        <div class="go_group" @click="goGroup(id, storeid)">
          <span>去开团</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    teamList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: null
    },
    thumb: {
      type: String,
      default: null
    },
    group_price: {
      type: [String, Number],
      default: ""
    },
    price: {
      type: [String, Number],
      default: ""
    },
    num: {
      type: [String, Number],
      default: ""
    },
    id: {
      type: [String, Number],
      default: ""
    },
    storeid: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {};
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {},

  methods: {
    getAllTeam() {
      this.$emit("openTeam", { id: this.id, storeid: this.storeid , title: this.title});
    },
    goGroup() {
      this.$emit("click", { id: this.id, storeid: this.storeid , title: this.title});
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#groupListCell {
  background-color: #fff;
  border-radius: 0.5rem;
  display: flex;
  margin: 0.625rem;
  padding: 0.625rem;

  .goods_img {
    width: 7.5rem;
    height: 7.5rem;
    background: #f2f2f2;
    overflow: hidden;
    border-radius: 0.625rem;
    border-radius: 0.25rem;
    margin-right: 0.625rem;
    flex-shrink: 0;

    img {
      width: 100%;
    }
  }

  .goods_info {
    width: 14.0625rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .name {
      font-size: 14px;
      height: 2.625rem;
      line-height: 1.25rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .price {
      font-size: 16px;
      color: #f15353;

      span {
        font-size: 12px;
      }

      span:last-child {
        color: #8c8c8c;
        margin-left: 0.625rem;
      }
    }

    .number {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 1.5rem;
          color: #f15353;
          margin-right: 0.375rem;
        }

        span {
          color: #f15353;
          font-size: 14px;
          border-left: solid 0.0625rem #ebebeb;
          padding-left: 0.375rem;
        }
      }

      .go_group {
        width: 5rem;
        height: 1.75rem;
        border-radius: 0.25rem;
        background: #f15353;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          color: #fff;
          font-size: 14px;
        }

        .fa {
          color: #fff;
          font-size: 1rem;
          margin-left: 0.625rem;
        }
      }
    }
  }

  .allteam {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 0 0.38rem;
    background-color: #f8f8f8;

    .allLeft {
      flex: 1;
      display: flex;
      overflow: hidden;
      align-items: center;
      font-size: 12px;

      .teamNo {
        color: #f15353;
        max-width: 55%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 0.35rem;
        text-align: right;
      }

      .teamTwo {
        flex: 1;
      }
    }

    .allRight {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
